<template>
  <div id="substance" class="substance__wrapper">
    <header class="header-title__wrapper" style="z-index: 9">
      <div v-if="!atPvg" class="header-title"></div>
      <div v-else class="header-title header-title--pvg"></div>
    </header>
    <main class="main__wrapper">
      <div class="main">
        <div class="main--left-border"></div>
        <div class="main__content">
          <em class="main__content-timer font--title">{{
            timerState.timer
          }}</em>
          <router-view v-slot="{ Component }">
            <transition name="fade-opacity">
              <component :is="Component" />
            </transition>
          </router-view>
        </div>
        <div class="main--right-border"></div>
      </div>
    </main>
    <div
      v-show="tooltipState.showTooltip"
      class="f-tooltip"
      :style="computedStyle"
    >
      {{ tooltipState.text }}
    </div>
    <footer class="footer" style="z-index: 9">
      <div v-if="!atOcean" class="footer--checkbox__wrapper">
        <bottom-checkbox v-if="!atPvg" v-model="state.shaActive" icon="sha">
          虹桥国际机场</bottom-checkbox
        >
        <bottom-checkbox v-if="!atPvg" v-model="state.pvgActive" icon="pvg"
          >浦东国际机场</bottom-checkbox
        >
        <bottom-checkbox v-model="state.airbusActive" icon="airbus"
          >客机</bottom-checkbox
        >
        <bottom-checkbox v-model="state.cargoActive" icon="cargo"
          >货机</bottom-checkbox
        >
      </div>
      <template v-if="!atPvg">
        <!-- <div class="footer--nav-pvg active">
          <div v-show="atOcean" class="footer--nav-left-text"></div>
        </div> -->
        <router-link to="/ocean">
          <div :class="{ 'footer--nav-left': true, active: atOcean }">
            <div class="footer--nav-left-text"></div>
          </div>
        </router-link>
        <router-link to="/">
          <div :class="{ 'footer--nav-right': true, active: !atOcean }">
            <div class="footer--nav-right-text"></div>
          </div>
        </router-link>
      </template>
      <template v-else>
        <div class="footer--nav-pvg active">
          <div class="footer--nav-pvg-text"></div>
        </div>
      </template>
    </footer>
  </div>
</template>

<script>
import { useTime } from './composables/useTime.ts';
import { useCheckboxProvider } from './composables/useChecbox.ts';
import { useTooltipProvider } from './composables/useTooltip.ts';
import BottomCheckbox from './components/BottomCheckbox.vue';

export default {
  name: 'App',
  components: {
    BottomCheckbox,
  },
  setup() {
    const { timerState } = useTime();
    const { state } = useCheckboxProvider();
    const { state: tooltipState, computedStyle } = useTooltipProvider();
    return {
      timerState,
      state,
      tooltipState,
      computedStyle,
    };
  },
  computed: {
    atPvg() {
      return this.$route.path.match(/(pvg)/);
    },
    atOcean() {
      return this.$route.path.match(/(ocean)/);
    },
  },
};
</script>
